<template>
  <div class="login">
    <div class="form_wrap display_flex align_items_flex_start flex_direction_row_reverse">
      <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" class="login_form">
        <div class="title">
          {{ appName}}
        </div>
        <div class="sub_title">
          欢迎登录
        </div>
        <el-form-item prop="accountName">
          <el-input v-model="loginForm.accountName" placeholder="请输入您的登录账号" @keyup.13.native="login" v-tab="{ index: 1, max: 3 }">
            <i slot="prefix" class="iconfont icon_user"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入您的登录密码"
            ref="password"
            @keyup.13.native="login"
            v-tab="{ index: 2, max: 3 }"
          >
            <i slot="prefix" class="iconfont icon_password"></i>
            <i
              slot="suffix"
              style="cursor:pointer"
              class="iconfont"
              @click="changePasswordType"
              :class="passwordType == 'password' ? 'icon_eyeOff' : 'icon_eyeOn'"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="captcha" class="captcha_wrap" v-if="isProduction">
          <div class="display_flex flex_wrap_wrap">
            <el-input
              v-model="loginForm.captcha"
              placeholder="请输入验证码"
              class="captcha_input"
              @keyup.13.native="login"
              v-tab="{ index: 3, max: 3 }"
            >
              <i slot="prefix" class="iconfont icon_verify"></i>
            </el-input>
            <div class="captcha_img display_flex align_items_center flex_none">
              <img :src="captchaImg" alt="验证码" />
              <span @click="changeCaptcha">换一张</span>
            </div>
          </div>
        </el-form-item>
        <el-button
          @click="login"
          type="primary"
          class="login_btn"
          :loading="loading"
          round
        >
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { appName, isProduction } from '@/setting.js';
import { setTmpCache } from '@u/cache.js';
import { getCaptcha, doLogin } from '@/api/common.js';
import md5 from 'md5';

const dev = process.env.NODE_ENV == 'development';

export default {
  name: 'Login',
  data() {
    return {
      appName,
      isProduction, // 是否为生产模式
      captchaImg: '',
      passwordType: 'password',
      loginForm: {
        accountName: dev ? 'admin' : '',
        password: dev ? '123123' : '',
        captcha: dev ? '' : ''

      },
      loginFormRules: {
        accountName: [
          { required: true, message: '请填写账号', tigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', tigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请填写验证码', tigger: 'blur' }
        ],
      },
      loading: false,
    };
  },
  created() {
    if (this.isProduction) {
      this.changeCaptcha();
    }
  },
  methods: {
    changePasswordType() {
      this.passwordType = this.passwordType == 'password' ? '' : 'password';
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    changeCaptcha() {
      getCaptcha().then(res => {
        if (res.code == 200) {
        // console.log(res);
          this.captchaImg = `data:image/png;base64,${ res.data.stringValue }`;
        }
      });
    },
    login() {
      if (!this.isProduction) {
        this.$router.push('/');
        return;
      }
      if (!this.loading) {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            doLogin({
              data: {
                accountName: this.loginForm.accountName,
                password: md5(this.loginForm.password),
                captcha: this.loginForm.captcha
              }
            }).then(res => {
              // console.log(res);
              this.loading = false;
              if (res.code == 200) {
                setTmpCache('token', res.data.token);
                this.$router.push('/');
              }
              if (res.code == 401) {
                this.$message.error(res.msg);
              }
            });
          } else {
            return false;
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: url('../../assets/images/login_bg.png') no-repeat;
  background-color: $themeColor_IE;
  background-color: $themeColor;
  // background-color: #5991ff;
  background-size: 100% 100%;
  .form_wrap {
    height: 100%;
    border-left: 10vw solid transparent;
    border-right: 10vw solid transparent;
    .login_form {
      width: 610px;
      background: #ffffff;
      padding: 85px;
      border-radius: 6px;
      margin: auto 0;
      .title {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        text-align: center;
        margin-bottom: 20px;
        color: $themeColor_IE;
        color: $themeColor;
        // color: #5991ff;
      }
      .sub_title {
        font-size: 18px;
        text-align: center;
        color: #666;
        margin-bottom: 40px;
      }
      .iconfont {
        color: $themeColor_IE;
        color: $themeColor;
        // color: #5991ff;
      }
      .captcha_wrap {
        &.el-form-item {
          margin-bottom: 15px;
        }
        .captcha_input {
          flex: 1 1 240px;
          margin-bottom: 10px;
        }
        .captcha_img {
          width: 40%;
          min-width: 152px;
          margin-bottom: 10px;
          > * {
            flex-shrink: 0;
          }
          > img {
            margin-left: auto;
            width: 100px;
            height: 40px;
          }
          > span {
            cursor: pointer;
            margin-left: 10px;
            color: #ccc;
            user-select: none;
          }
        }
      }
      .login_btn {
        width: 100%;
        padding: 12px !important;
        margin: 15px 0;
      }
      ::v-deep {
        .el-form-item {
          margin-bottom: 25px;
        }
        .el-input {
          .el-input__inner {
            height: 45px;
            line-height: 45px;
          }
          .el-input__prefix, .el-input__suffix {
            line-height: 45px;
          }
          .el-input__prefix {
            padding-left: 10px;
          }
          .el-input__suffix {
            padding-right: 5px;
          }
        }
        .el-input--prefix .el-input__inner {
          padding-left: 40px;
        }
        .el-input--suffix .el-input__inner {
          padding-right: 40px;
        }
      }
    }
  }
}
</style>
